<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				display: inline-block;
				height: 180px;
				margin: 20px;		
			}
			th{
				background-color: pink;
			}
			td{
				width: 30px;
			}
			#iweek{
				color:blue ;
				font-weight: 100;
			}
		</style>
		<script>
			function calendar(y){
				var html = '';
				/*1月的第一天是周几*/
				var week = new Date(y,0).getDay();
				for(var m = 1;m<=12;m++){
					html += '<table>';
					html += '<tr> <th colspan="7">'+y+'年'+m+'月 </th></tr>'
					html += '<tr id="iweek"> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr>';
					/*每月的天数*/
					var maxDay = new Date(y,m,0).getDate();
					
					/*计算星期*/
					html += '<tr>'
					for(var d = 1;d<=maxDay;d++){
						if(d==1 && week){
							html += '<td colspan="'+week+'">';
						}
						html += ' <td> '+ d +'</td>';
						if(week == 6 && d != maxDay){
							html += '</tr><tr>';
						}else if(d == maxDay){
							html += '</tr>';
						}
						week = (week+1>6)?0:week+1;
					}
					
					html += '</table>';
				}
				return html;
			}
		
		</script>
	</head>
	<body>
		<!--<table>
			<tr> <th colspan="7"> </th></tr>
			<tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr>
			<tr> 
			  <td colspan="3"></td>
			  <td> a</td>
			</tr>
			<tr></tr>
		</table>-->
	
	</body>
	<script type="application/javascript">
		/*var year = parseInt(prompt('输入年份：','2018'));*/
		document.write(calendar(2018));
		
	</script>
</html>
